<template>
  <div class="login">
    <div class="content">
      <ul>
        <li>
          <div class="header"></div>
        </li>
        <li>
          <el-input
          placeholder="用户名"
          v-model="userName"
          class="input"
          >
          </el-input>
        </li>
        <li>
          <el-input
            type="password"
            placeholder="密码"
            v-model="password"
            class="input"
            >
          </el-input>
        </li>
        <li>
          <div class="middle">
            <el-checkbox v-model="checked" class="left">记住我</el-checkbox>
            <el-button type="text" class="right" @click="forgetPass">忘记密码？</el-button>
          </div>
        </li>
        <li>
          <el-button type="primary" class="submit" @click="login">登   录</el-button>
        </li>
        <li>
          <div>没有账号？<el-button type="text" @click="register">注册</el-button></div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
  import {login} from './../api/api';
    export default {
        name: "login",
        data(){
          return {
            checked: false,
            userName: '',
            password: ''
          }
        },
        methods:{
          forgetPass: function(){
            console.log('忘记密码！')
          },
          login: function(){
            if (this.userName === '' || this.password === '') {
              return this.$message({
                type: 'warning',
                message: '密码或账号不能为空'
              })
            }
            const userData = {
              userName: this.userName,
              userPass: this.password
            }
            console.log(userData);
            this.$router.push({name: 'UserInformation'});
            //向后台发起登录请求
            /*login(userData).then(response=>{
              let res = response.data;
              if (res.code === 200) {

              }
            })*/
          },
          register: function(){
            this.$router.push({path: '/register'});
          }
        }
    }
</script>

<style lang="scss" scoped>
  @import '../assets/css/public/public';
  @import '../assets/css/login/login';
</style>
